<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 800px;
			min-height: 500px;
			background: rgba(0, 0, 0, 0.1) url() 0 0 no-repeat;
			margin: 0 auto;
			text-align: center;
			color: #333;
			font-family: 宋体;
			margin-top: 20px;
			padding-bottom: 200px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		h2{
			font-size: 30px;
		}
		.box .cc{
			height: 30px;
			line-height: 30px;
			margin: 20px 0;
		}
		textarea{
			border: 1px solid rgba(0, 0, 0, 0.2);
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
			max-width: 800px;
			padding-left: 6px;
		}
		input{
			margin: 0;
			outline:none;
			border: 0;
			vertical-align: middle;
			margin-right: 5px;
		}
		.text{
			width: 400px;
			height: 30px;
			padding-left: 6px;
		}
		.span{
			display: inline-block;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			margin-right: 10px;
			height: 30px;
			padding:0 5px;
			line-height: 30px;
			vertical-align: middle;
			font-size: 20px;
		}
		label{
			font-size: 14px;
			margin-right: 10px;
			vertical-align: middle;
		}
		button{
			outline:none;
			width: 60px;
			height: 30px;
			border: 0;
			margin-left: 10px;
			background: rgba(0, 0, 0, 0.2) url() 0 0 no-repeat;
			vertical-align: middle;
			cursor: pointer;
		}
		h3{
			-ms-text-align-last: left;
			text-align-last: left;
			padding-left: 20px;
		}
		.show div{
			width: 760px;
			min-height: 200px;
			margin: 0 auto;
			background: rgba(255,255,255,0.8) url() 0 0 no-repeat;
			-ms-text-align-last: left;
			text-align-last: left;
			padding-left: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
	</style>
</head>
<body>

	<div class="box">
		<h2>正则测试</h2>
		<textarea name="" id="str" cols="30" rows="5"></textarea>
		<div class="cc">
			<span class="span">正则规则:</span><input type="text" class="text"><input type="checkbox" class="check" id="gl"><label for="gl">全局匹配</label><input type="checkbox" class="check" id="bs"><label for="bs">大小写区分</label><button>提交</button>
		</div>
		<div class="show">
			<h3>匹配结果:</h3>
			<div></div>
		</div>
	</div>
	<script src="jquery.js"></script>
	<script>
		$("button").on("click",function(){
			var $str=$("#str").val();
			var $text=$(".text").val();
			var $gl=$("#gl").is(":checked")?"g":"";
			var $bs=$("#bs").is(":checked")?"i":"";
			var $show=$(".show div");
			if($str&&$text){	
				var reg=new RegExp($text,$gl+$bs);
				var result=$str.match(reg);
				if(result){
					var length=result.length;
					var html="共匹配到"+length+"条结果:<br>";
					$.each(result,function(i,v){
						html+=v+'<br>';
					})
					$show.html(html);
				}else{
					$show.html("没相关数据;")
				}
				
			}

		})
	
		
	</script>
</body>
</html>